<template>
	<Layout class="p-5 bg-white">
		<div class="p-5-1">
			<Form class="p-5" label-position="left" :label-width="120">
				<FormItem class="w-50" label="出库批次号 :">
					<label>{{outboundinfo.deliveryBatchNumber}}</label>
				</FormItem>
				<FormItem class="w-50" label="出库时间 :">
					<label>{{outboundinfo.deliveryTime}}</label>
				</FormItem>
				<FormItem class="w-50" label="仓库名称 :">
					<label>{{outboundinfo.warehouseName}}</label>
				</FormItem>
				<FormItem class="w-50" label="销售批次号 :">
					<label>{{outboundinfo.salesBatchNumber}}</label>
				</FormItem>
				<FormItem class="w-50" label="仓库管理员 :">
					<label>{{outboundinfo.userName}}</label>
				</FormItem>
				<Row class="p-1">
					<Button @click="back" class="m-1 float-right">返回</Button>
				</Row>
				<Table :columns="tableInfo.columnInfo" :data="tableInfo.data" ></Table>
			</Form>

			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
		
	</Layout>
</template>

<script>
	export default {
		data: function() {
			return {
				outboundinfo: {
					outboundHeaderId: "1002",
					deliveryBatchNumber: "",
					warehouseName: "",
					salesBatchNumber: "",
					userName: "",
					productId: "",
					productName: "",
					outboundProductNum: "",
					deliveryTime: "",
					salesBatchNumber: "",
					current: 1,
					size: 10
				},
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [
						{
							title: "产品编号",
							key: "productId",
							align: 'center'	
						},
						{
							title: "产品名称",
							key: "productName",
							align: 'center'
						},
						{
							title: "出库数量",
							key: "outboundProductNum",
							align: 'center'
						}
					],
					data: []
				},
			}
		},
		created: function() {
			this.outboundinfo.outboundId = this.$route.query.outboundId;
			this.loadData();
		},
		methods: {
			loadData: function() {
				this.http.get({
					url: "/outbound/detail/page",
					param: this.outboundinfo
					// {
					// 	intoHeaderId: this.outboundinfo.intoHeaderId,
					// 	 current : this.outboundinfo.current,
					// 	 size : this.outboundinfo.size
					// }
				}).then(data => {
					console.log(data);
					this.outboundinfo.batchNo = data.resultData.into_with_purchase.batchNo;
					this.outboundinfo.warehouseName = data.resultData.into_with_purchase.warehouseName;
					this.outboundinfo.intoWarehouseDate = data.resultData.into_with_purchase
						.intoWarehouseDate;
					this.outboundinfo.purchaseNo = data.resultData.into_with_purchase.purchaseNo;
					this.outboundinfo.userName = data.resultData.into_with_purchase.userName;
					this.tableInfo.currentPage = data.resultData.product_with_number.current;
					this.tableInfo.total = data.resultData.product_with_number.total;
					this.tableInfo.pageSize = data.resultData.product_with_number.size;
					this.tableInfo.data = data.resultData.product_with_number.records;
				});
			},
			back: function() {
				this.message.info("已返回");
				this.$tabs.close();
			},
			pageSearch: function(changedPage) {
				this.outboundinfo.current = changedPage;
				this.loadData();
			}
		}
	}
</script>

<style scoped="scoped">

	.p-5-1 {
		margin: 0 auto;
		width: 70%;
	}
	
	.w-50 {
		margin: 0 auto;
	}
	
</style>
